{{extend './layouts/layout.html'}}

{{block 'content'}}
<div class="container-fluid">
  <div class="page-title">
    <h1>写文章</h1>
  </div>
  <!-- 有错误信息时展示 -->
  <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
  <form class="row" id="addForm">
    <div class="col-md-9">
      <div class="form-group">
        <label for="title">标题</label>
        <input id="title" class="form-control input-lg" name="article_title" type="text" placeholder="文章标题">
      </div>
      <div class="form-group">
        <label for="content">标题</label>
        <!-- <textarea id="content" class="form-control input-lg" name="content" cols="30" rows="10"
          placeholder="内容"></textarea> -->
        
        <!-- 富文本编辑器 -->
        <div id="editor">
          <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="form-group">
        <label for="slug">别名</label>
        <input id="slug" class="form-control" name="article_slug" type="text" placeholder="slug">
        <p class="help-block">https://example.com/post/<strong>slug</strong></p>
      </div>
      <div class="form-group">
        <label for="feature">特色图像</label>
        <!-- show when image chose -->
        <img class="help-block thumbnail" style="display: none">
        <input id="feature" class="form-control" name="article_file" type="file">
      </div>
      <div class="form-group">
        <label for="category">所属分类</label>
        <select id="category" class="form-control" name="article_cateid">
          <!-- <option value="1">未分类</option>
          <option value="2">潮生活</option> -->
        </select>
      </div>
      <div class="form-group">
        <label for="created">发布时间</label>
        <input id="created" class="form-control" name="article_addtime" type="datetime-local">
      </div>
      <div class="form-group">
        <label for="status">状态</label>
        <select id="status" class="form-control" name="article_status">
          <option value="草稿">草稿</option>
          <option value="已发布">已发布</option>
        </select>
      </div>
      <div class="form-group">
        <button class="btn btn-primary" type="submit">保存</button>
      </div>
    </div>
  </form>
</div>
{{/block}}

{{block 'script'}}
<script src="/node_modules/wangeditor/dist/wangEditor.min.js"></script>
<script id="temp" type="text/html">
  {% each list item %}
  <option value="{% item.cate_id %}">{% item.cate_name %}</option>
  {% /each %}
</script>
<script>
  const $addForm = $('#addForm')

  loadCategories()

  // 富文本编辑器
  const E = window.wangEditor
  const editor = new E('#editor')
  console.log('editor---', editor)
  // 或者 const editor = new E( document.getElementById('editor') )
  editor.config.uploadImgServer = '/api/upload'  // 上传图片到服务器
  editor.config.uploadFileName = 'file' // 上传文件自定义文件名
  
  editor.create()

  $addForm.validate({
    rules: {
      article_title: {
        required: true
      },
      article_body: {
        required: true
      },
      article_slug: {
        required: true
      },
      article_file: {
        required: true
      },
      article_cateid: {
        required: true
      },
      article_addtime: {
        required: true
      },
      article_status: {
        required: true
      }
    },
    messages: {},
    submitHandler: addArticle
  })

  /**
   * 方法区
  */
  // 加载所有分类
  function loadCategories() {
    $.ajax({
      url: '/api/categories',
      type: 'get',
      data: {},
      dataType: 'json',
      success: res => {
        console.log('loadCategoriesRes---', res)
        if (res.success) {
          const htmlStr = template('temp', {list: res.categoriesList})
          $('#category').html(htmlStr)
        }
      },
      error: err => {
        console.log(err)
      }
    })
  }

  // 添加文章
  function addArticle() {
    console.log('editor.txt.html()---', editor.txt.html())
    const formData = new FormData($addForm[0])
    formData.append('article_body', editor.txt.html())
    console.log('formData---', formData)
    $.ajax({
      url: '/api/post/add',
      type: 'post',
      data: formData,
      dataType: 'json',
      contentType: false,// 不设置内容类型
      processData: false,// 不处理数据
      success: res => {
        console.log('addArticleRes---', res)
        if (res.success) window.alert('添加成功')
      },
      error: err => {
        console.log(err)
      }
    })
  }
</script>
{{/block}}